<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/star.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>

	<body>
		<input type="checkbox" id="check" />
		<input type="checkbox" id="btnoff" />
		<input type="checkbox" id="play" />
		<div class="web">
			<div class="bgimg"><img src="img/bgimg.png" /></div>
			<div class="shuiwen"><img src="img/shuiwen.png" /></div>
			<div class="peo"><img src="img/people.png" /></div>
			<div class="logo"><img src="img/logo.png" /></div>
			<div class="title1"><img src="img/title_1.png" /></div>
			<div class="title2"><img src="img/title_2.png" /></div>
			<div class="title3"><img src="img/title_3.png" /></div>
			<div class="btn">
				<label for="play">
						<img src="img/btn.png"/>
					</label>
			</div>
			<label for="check">
					<p class="game">游戏规则</p>
				</label>
			<div class="guize">
				<button class="close">
						<label for="btnoff">
							<img src="img/close.png"/>
						</label>
					</button>
				<h1 class="tou1">游戏规则</h1>
				<p class="p1">1.每玩一次游戏可获得一次抽奖机会；</p>
				<p class="p1">2.游戏排名越靠前，中奖几率越大。</p>
				<h1 class="tou2">奖品设置</h1>
				<p class="p2">1.小米运动手环</p>
				<p class="p2">2.超轻户外背包</p>
				<p class="p2">3.乐扣便携运动水壶</p>
				<p class="p2">4.迪卡侬透气速干T恤</p>
				<p class="p2">5.迪卡侬速干毛巾</p>
				<p class="p2">6.多功能运动腰包</p>
				<p class="p2">7.安联运动意外保障计划（7天）</p>
			</div>
		</div>

		<!--预加载页面-->
		<div class="loading">
			<div class="logo2"><img src="img/logo2.png" /></div>//预加载结束后该标签隐藏
			<div class="bgimg">
				<img src="img/bgimg.png" />
				<img src="img/begin_zhuzi.png" />
			</div>
			<div class="shuiwen"><img src="img/shuiwen.png" /></div>
			<div class="zhuzi">
				<img src="img/zhuzi.jpg" />
				<img src="img/zhuzi.jpg" />
			</div>
			<p class="yujiazai">Loading...</p>//预加载结束后该标签隐藏
			<div class="load"></div>
		</div>
			<!--开始页面-->
			<div class="ready">
				<div class="Longbgimg">
				<!--<img src="img/bgimg.png" />
				<img src="img/begin_zhuzi.png" />-->
				</div>
				<div class="mudi"><img src="img/mudi.png"/></div>
				<div class="shuiwen"><img src="img/shuiwen.png" /></div>
				<!--<div class="zhuzi">
					<img src="img/zhuzi.jpg" />
					<img src="img/zhuzi.jpg" />
				</div>-->
				<p class="Time">Time</p>
				<p class="miao">00.00</p><!--倒计时结束后该标签开始计时-->
				<!--倒计时-->
				<div class="timeout">
					<p class="p1">Ready</p>
					<p class="p2">3</p>
					<p class="p3">2</p>
					<p class="p4">1</p>
					<p class="p5">GO</p>
				</div>
				<div class="win"><p>WIN!</p></div>
				<div class="lunbo">
					<ul class="swimmer">
						<li><img src="img/0.png"/></li>
						<li><img src="img/1.png"/></li>
						<li><img src="img/2.png"/></li>
						<li><img src="img/3.png"/></li>
						<li><img src="img/4.png"/></li>
						<li><img src="img/5.png"/></li>
						<li><img src="img/6.png"/></li>
						<li><img src="img/7.png"/></li>
						<li><img src="img/8.png"/></li>
						<li><img src="img/9.png"/></li>
						<li><img src="img/10.png"/></li>
						<li><img src="img/11.png"/></li>
						<li><img src="img/12.png"/></li>
						<li><img src="img/13.png"/></li>
						<li><img src="img/14.png"/></li>
						<li><img src="img/15.png"/></li>
						<li><img src="img/16.png"/></li>
					</ul>
				</div>
				<div class="left">
					<img src="img/left_jiantou.png" />
				</div>
				<div class="right">
					<img src="img/right_jiantou.png" />
				</div>
				<div class="move">点击左右键，向前移动</div>
			</div>
		<script src="js/my_ajax.js"></script>
		<script src="js/preloadjs.min.js"></script>
		<script type="text/javascript">
			//点击开始游戏按钮实现预加载
			var btn = document.querySelector(".btn");
			btn.addEventListener("click",function(){
				var loader = document.querySelector(".load");
				var baseUrl = "js/loading.json";
				var ready = document.querySelector(".ready");
				var yujiazai = document.querySelector(".loading");
				my_ajax(baseUrl, "get", function(res) {
					var loading = new createjs.LoadQueue();
					loading.loadManifest(res);
					loading.on("progress", function(event) {
						var num = Math.floor(event.progress * 100);
						loader.innerText = num + "%";
					})
					loading.on("complete", function() {
						yujiazai.style.display = "none";
						ready.style.display = "block";
						sport();
					})
				})
			})
			
			//倒计时
			var timeout = document.querySelector(".timeout");
			var p1 = document.querySelector(".timeout .p1");
			var p2 = document.querySelector(".timeout .p2");
			var p3 = document.querySelector(".timeout .p3");
			var p4 = document.querySelector(".timeout .p4");
			var p5 = document.querySelector(".timeout .p5");
			timeout.addEventListener("click",function(){
				p1.style.display = "none";
				p2.style.display = "block";
				setTimeout(function(){
					p2.style.display = "none";
					p3.style.display = "block";
					setTimeout(function(){
						p3.style.display = "none";
						p4.style.display = "block";
							setTimeout(function(){
								p4.style.display = "none";
								p5.style.display = "block";
								setTimeout(function(){
									timeout.style.display = "none";
									gameTime = 0;
									stopWatch = setInterval(stopW,10);
								},1000)
							},1000)
					},1000)
				},1000)
			})
			var miao = document.querySelector("p.miao");
			var stopWatch;
			var gameTime;
			function stopW() {
				gameTime += 0.01;
				miao.innerHTML = gameTime.toFixed(2);
			}
			//游泳者动画
			function sport(){
				var lunbo = document.querySelector(".lunbo");
				var swimmer = lunbo.querySelector(".swimmer")
				var ali = swimmer.querySelectorAll("li");
				var imgW = ali[0].offsetWidth;
				console.log(ali[0].offsetWidth)
				var index = 1;
				var isClick = true;
				var imgClone = ali[0].cloneNode(true);
				var shuiwen = document.querySelector(".ready .shuiwen")
				swimmer.appendChild(imgClone);
				
				
				shuiwen.addEventListener("click",function(){
					if(isClick){
						index++;
						console.log(imgW)
						swimmer.style.transform = "translateX(-"+imgW*index+"px)";
					}
//					isClick = false;
					if(index==16) {
						index = 1;
					}

				})
				swimmer.addEventListener("transitionend",function(){
					if(index==ali.length){
						index=0;
						swimmer.style.transform = "translateX(-"+imgW*index+"px)";
					}
					isClick = true;
				})
			}
			
			//水景动画
			var longimg = document.querySelector(".Longbgimg");
			var shuiwen = document.querySelector(".ready .shuiwen");
			var mudi = document.querySelector(".mudi");
			var distance = 0;
//			console.log(mudi);
			var isClick = true;
			mudi.style.top = -240 + "px";
			var running = true;
			shuiwen.addEventListener("click",function(){
				if(running) {
					
					longimg.style.backgroundPositionY = -3976 + (distance*30) + "px";
				}
				distance++;
				var fina = longimg.style.backgroundPositionY;
				fina=parseInt(fina);
				if(fina > -167){
//					console.log(mudi.style.top);
					if(running) {
						mudi.style.top = (parseInt(mudi.style.top) + 30) + "px";
						
						var stop = mudi.style.top;
						stop = parseInt(stop);
					}
//					console.log(stop)
					if(stop == 0){
						running = false;
						var win = document.querySelector(".win");
						clearInterval(stopWatch);
						win.style.display = "block";
					}
					
				}
			})
			
		</script>
	</body>

</html>